<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接样式</title>
    <style>
        /*
        可以根据链接处于什么状态来设置链接的不同样式。
        四种链接状态分别是：
            a:link - 正常的，未访问的链接
            a:visited - 用户访问过的链接
            a:hover - 用户将鼠标悬停在链接上时
            a:active - 链接被点击时
        */
        a:link{
            color: red;
            /*删除链接的下划线*/
            text-decoration:none;
        }
        a:hover{
            background-color: #0ff000;
            /*展示链接的下划线*/
            text-decoration:underline;
        }
        a:visited{
            color: #0000FF;
        }
        a:active{
            background-color: #000;
        }

    </style>
</head>
<body>
    <h1><a href="#1">链接一</a></h1>
    <h1><a href="#2">链接二</a></h1>
    <h1><a href="#3">链接三</a></h1>
    <h1><a href="#4">链接四</a></h1>

</body>
</html>